import * as echarts from 'echarts'
import 'echarts-gl'

export const getChartOne = (dom) => {
  let chart = echarts.init(dom)
  let option = {
    title: {
      text: '用电增速与GDP增速趋势', // 主标题文本
      // subtext: '副标题', // 副标题文本
      left: 'center', // 标题水平位置：'left'/'center'/'right'
      top: '40', // 标题垂直位置
      textStyle: {
        color: '#fff', // 主标题文字颜色
        fontSize: 40 // 主标题文字大小
        // fontWeight: 'bold' // 主标题文字粗细
      }
      // subtextStyle: {
      //   color: '#ccc', // 副标题文字颜色
      //   fontSize: 30 // 副标题文字大小
      // },
      // padding: [10, 0, 0, 0] // 标题内边距 [上, 右, 下, 左]
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(8,45,74,0.85)',
      borderColor: 'rgb(140,255,74)', //设置边框颜色
      padding: 12,
      axisPointer: {
        type: 'shadow'
      },
      textStyle: {
        fontSize: 40,
        color: '#fff'
      },
      formatter: (params) => {
        let arr = [...params]
        let str = ''
        arr.forEach((item, index) => {
          if (item.componentSubType == 'line') {
            str +=
              '<span style="margin-right:10px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
              item.color +
              ';"></span>' +
              item.seriesName +
              '  ' +
              item.data +
              '%' +
              '<br />'
          } else {
            str +=
              '<span style="margin-right:10px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
              item.color +
              ';"></span>' +
              item.seriesName +
              '  ' +
              item.data +
              '<br />'
          }
        })
        str = arr[0].name + '<br />' + str
        return str
      }
    },
    legend: {
      top: '18%',
      textStyle: {
        fontSize: '32px',
        color: '#fff',
        padding: [0, 8]
      }
    },
    grid: {
      left: '5%',
      right: '5%',
      bottom: '5%',
      top: 200,
      padding: '0 0 10 0',
      containLabel: true
    },
    xAxis: {
      // data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023', '2024'],
      data: ['2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023'],
      triggerEvent: true,
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: true,
        rotate: 0,
        interval: 0,
        textStyle: {
          padding: [14, 0, 0, 0],
          fontSize: 32,
          color: '#fff'
        }
      }
    },
    yAxis: [
      {
        type: 'value',
        splitLine: {
          show: false
        },
        axisTick: {
          show: true
        },
        axisLine: {
          show: false,
          lineStyle: {
            width: 2, // 设置线条粗细，单位是px
            color: '#fff', // 可以同时设置颜色
            type: 'solid' // 可以设置线条类型：'solid'|'dashed'|'dotted'
          }
        },
        axisLabel: {
          show: true,
          formatter: function (value) {
            return value + '%' // 添加百分号
          },
          color: '#fff',
          fontSize: 32
        }
      }
    ],
    series: [
      {
        name: '用电增速',
        type: 'line',
        symbol: 'circle', //标记的图形为实心圆
        symbolSize: 20, //标记的大小
        itemStyle: {
          //折线拐点标志的样式
          color: '#42E0FF',
          borderColor: '#fff',
          borderWidth: 5
        },
        lineStyle: {
          color: '#42E0FF',
          width: 5
        },
        // data: [2.2, -1.2, 2.5, 3.3, -2.2, 3.4, 2.8, 3.4]
        data: [3.5, 0.35, 4.85, 6.2, 8.3, 4.34, 3.35, 10.5, 3.6, 6.5]
      },
      {
        name: 'GDP增速',
        type: 'line',
        symbol: 'circle', //标记的图形为实心圆
        symbolSize: 20, //标记的大小
        itemStyle: {
          //折线拐点标志的样式
          color: 'rgba(255, 195, 0, 1)',
          borderColor: '#fff',
          borderWidth: 5
        },
        lineStyle: {
          color: 'rgba(255, 195, 0, 1)',
          width: 5
        },
        // data: [2.2, -1.2, 2.5, 3.3, -2.2, 3.4, 2.8, 3.4]
        data: [7.3, 7.15, 7.05, 6.93, 8.8, 4.7, 3.15, 8.5, 3.4, 5.6]
      }
    ]
  }
  chart.setOption(option, true)
}

export const getChartTwo = (dom) => {
  let chart = echarts.init(dom)
  let option = {
    title: {
      text: '2022-2023年气温变化趋势', // 主标题文本
      // subtext: '副标题', // 副标题文本
      left: 'center', // 标题水平位置：'left'/'center'/'right'
      top: '40', // 标题垂直位置
      textStyle: {
        color: '#fff', // 主标题文字颜色
        fontSize: 40 // 主标题文字大小
        // fontWeight: 'bold' // 主标题文字粗细
      }
      // subtextStyle: {
      //   color: '#ccc', // 副标题文字颜色
      //   fontSize: 30 // 副标题文字大小
      // },
      // padding: [10, 0, 0, 0] // 标题内边距 [上, 右, 下, 左]
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(8,45,74,0.85)',
      borderColor: 'rgb(140,255,74)', //设置边框颜色
      padding: 12,
      axisPointer: {
        type: 'shadow'
      },
      textStyle: {
        fontSize: 40,
        color: '#fff'
      },
      formatter: (params) => {
        let arr = [...params]
        let str = ''
        arr.forEach((item, index) => {
          if (item.componentSubType == 'line') {
            str +=
              '<span style="margin-right:10px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
              item.color +
              ';"></span>' +
              item.seriesName +
              '  ' +
              item.data +
              '℃' +
              '<br />'
          } else {
            str +=
              '<span style="margin-right:10px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
              item.color +
              ';"></span>' +
              item.seriesName +
              '  ' +
              item.data +
              '<br />'
          }
        })
        str = arr[0].name + '<br />' + str
        return str
      }
    },
    legend: {
      top: '18%',
      textStyle: {
        fontSize: '32px',
        color: '#fff',
        padding: [0, 8]
      }
    },
    grid: {
      left: '5%',
      right: '5%',
      bottom: '10%',
      top: 200,
      padding: '0 0 10 0',
      containLabel: true
    },
    xAxis: [
      {
        // data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023', '2024'],
        type: 'category',
        data: [
          '第一季度',
          '第二季度',
          '第三季度',
          '第四季度',
          '第一季度',
          '第二季度',
          '第三季度',
          '第四季度',
          '第一季度',
          '第二季度',
          '第三季度',
          '第四季度'
        ],
        triggerEvent: true,
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: true,
          rotate: 0,
          interval: 0,
          textStyle: {
            padding: [14, 0, 0, 0],
            fontSize: 20,
            color: '#fff'
          }
        }
      },
      {
        type: 'category',
        data: [
          {
            value: '2022',
            textStyle: {
              fontSize: 32,
              lineHeight: 130,
              color: '#fff'
            }
          },
          {
            value: '2023',
            textStyle: {
              fontSize: 32,
              lineHeight: 130,
              color: '#fff'
            }
          },
          {
            value: '2024',
            textStyle: {
              fontSize: 32,
              lineHeight: 130,
              color: '#fff'
            }
          }
        ],
        position: 'bottom',
        axisTick: {
          length: 50
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        splitLine: {
          show: false
        },
        axisTick: {
          show: true
        },
        axisLine: {
          show: false,
          lineStyle: {
            width: 2, // 设置线条粗细，单位是px
            color: '#fff', // 可以同时设置颜色
            type: 'solid' // 可以设置线条类型：'solid'|'dashed'|'dotted'
          }
        },
        axisLabel: {
          show: true,
          formatter: function (value) {
            return value + '℃' // 温度符号
          },
          color: '#fff',
          fontSize: '30px'
        }
      }
    ],
    series: [
      {
        name: '最高温',
        type: 'line',
        symbol: 'circle', //标记的图形为实心圆
        symbolSize: 20, //标记的大小
        itemStyle: {
          //折线拐点标志的样式
          color: 'rgba(255, 87, 51, 1)',
          borderColor: '#fff',
          borderWidth: 5
        },
        lineStyle: {
          color: 'rgba(255, 87, 51, 1)',
          width: 5
        },
        // data: [2.2, -1.2, 2.5, 3.3, -2.2, 3.4, 2.8, 3.4]
        data: [18.1, 35.6, 38.9, 16.2, 11.3, 16.1, 33.3, 3.5, 13.2, 15.1, 43.2]
      },
      {
        name: '最低温',
        type: 'line',
        symbol: 'circle', //标记的图形为实心圆
        symbolSize: 20, //标记的大小
        itemStyle: {
          //折线拐点标志的样式
          color: 'rgba(255, 195, 0, 1)',
          borderColor: '#fff',
          borderWidth: 5
        },
        lineStyle: {
          color: 'rgba(255, 195, 0, 1)',
          width: 5
        },
        // data: [2.2, -1.2, 2.5, 3.3, -2.2, 3.4, 2.8, 3.4]
        data: [-16.2, 0.1, 5.2, -0.3, -10.8, -3.5, 14.6, 34.3, -20.1, -7.5, 9.8]
      }
    ]
  }
  chart.setOption(option, true)
}

export const getChartThree = (dom) => {
  let chart = echarts.init(dom)
  let option = {
    title: {
      text: '主要能源发电装机量占比', // 主标题文本
      // subtext: '副标题', // 副标题文本
      left: 'center', // 标题水平位置：'left'/'center'/'right'
      top: '40', // 标题垂直位置
      textStyle: {
        color: '#fff', // 主标题文字颜色
        fontSize: 40 // 主标题文字大小
        // fontWeight: 'bold' // 主标题文字粗细
      }
      // subtextStyle: {
      //   color: '#ccc', // 副标题文字颜色
      //   fontSize: 30 // 副标题文字大小
      // },
      // padding: [10, 0, 0, 0] // 标题内边距 [上, 右, 下, 左]
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    legend: {
      show: false
    },
    grid: {
      top: '20%', // 增加这个值会增加标题与图表的距离
      left: '4%',
      bottom: '0%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      axisLabel: {
        color: '#fff', // 设置y轴刻度字体颜色为深青色
        fontSize: 28
      },
      splitLine: {
        show: false
      }
    },
    yAxis: {
      axisLine: {
        show: false // 不显示 y 轴线
      },
      type: 'category',
      data: ['2024', '2023', '2022', '2021', '2020'],
      axisLabel: {
        color: '#fff', // 设置y轴刻度字体颜色为深青色
        fontSize: 28
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        name: '火力',
        type: 'bar',
        barWidth: '40%',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        data: [40, 43, 45, 48, 50],
        itemStyle: {
          color: '#FEBC27' // 自定义颜色
        }
      },
      {
        name: '水力',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        data: [22, 25, 22, 22, 22],
        itemStyle: {
          color: '#36AEC9' // 自定义颜色
        }
      },
      {
        name: '核电',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        data: [5, 5, 5, 8, 10],
        itemStyle: {
          color: '#BB4D22' // 自定义颜色
        }
      },
      {
        name: '新能源',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        data: [33, 27, 28, 22, 18],
        itemStyle: {
          color: '#4791F0' // 自定义颜色
        }
      }
    ]
  }
  chart.setOption(option, true)
}

export const getChartFive = (dom) => {
  let chart = echarts.init(dom)
  let option = {
    title: {
      text: '主要能源发电量占比', // 主标题文本
      // subtext: '副标题', // 副标题文本
      left: 'center', // 标题水平位置：'left'/'center'/'right'
      top: '43', // 标题垂直位置
      textStyle: {
        color: '#fff', // 主标题文字颜色
        fontSize: 40 // 主标题文字大小
        // fontWeight: 'bold' // 主标题文字粗细
      }
      // subtextStyle: {
      //   color: '#ccc', // 副标题文字颜色
      //   fontSize: 30 // 副标题文字大小
      // },
      // padding: [10, 0, 0, 0] // 标题内边距 [上, 右, 下, 左]
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    legend: {
      show: false
    },
    grid: {
      top: '20%', // 增加这个值会增加标题与图表的距离
      left: '4%',
      bottom: '0%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      axisLabel: {
        color: '#fff', // 设置y轴刻度字体颜色为深青色
        fontSize: 28
      },
      splitLine: {
        show: false
      }
    },
    yAxis: {
      axisLine: {
        show: false // 不显示 y 轴线
      },
      type: 'category',
      data: ['2024', '2023', '2022', '2021', '2020'],
      axisLabel: {
        color: '#fff', // 设置y轴刻度字体颜色为深青色
        fontSize: 28
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        name: '火力',
        type: 'bar',
        barWidth: '40%',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        data: [54, 52, 52, 56, 55],
        itemStyle: {
          color: '#FEBC27' // 自定义颜色
        }
      },
      {
        name: '水力',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        data: [18, 16, 25, 16, 20],
        itemStyle: {
          color: '#36AEC9' // 自定义颜色
        }
      },
      {
        name: '核电',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        data: [10, 8, 6, 12, 13],
        itemStyle: {
          color: '#BB4D22' // 自定义颜色
        }
      },
      {
        name: '新能源',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        data: [18, 24, 17, 16, 12],
        itemStyle: {
          color: '#4791F0' // 自定义颜色
        }
      }
    ]
  }
  chart.setOption(option, true)
}

export const getChartFour = (dom) => {
  let chart = echarts.init(dom)
  let option = {
    title: {
      text: '各行业用煤占比', // 主标题文本
      // subtext: '副标题', // 副标题文本
      left: 'center', // 标题水平位置：'left'/'center'/'right'
      top: '40', // 标题垂直位置
      textStyle: {
        color: '#fff', // 主标题文字颜色
        fontSize: 40 // 主标题文字大小
        // fontWeight: 'bold' // 主标题文字粗细
      }
      // subtextStyle: {
      //   color: '#ccc', // 副标题文字颜色
      //   fontSize: 30 // 副标题文字大小
      // },
      // padding: [10, 0, 0, 0] // 标题内边距 [上, 右, 下, 左]
    },
    grid: {
      top: '10%', // 上边距，可用具体像素值 '100px' 或百分比 '10%'
      bottom: '20%' // 下边距
    },
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        center: ['50%', '60%'],
        name: '访问来源',
        type: 'pie',
        radius: '60%',
        label: {
          show: true,
          // fontSize: 32, // 设置文字大小
          // color: '#fff', // 文字颜色
          // fontWeight: 'bold', // 文字粗细
          // formatter: '{b}\n{d}亿吨'
          // formatter: '{a|{b}}\n{b|{d}亿吨}',
          // formatter: '{b}: {c}',
          formatter: '{a|{b}}\n{b|{c}%}',
          rich: {
            a: {
              // lineHeight: 40, // 设置第一行文字的行高
              fontSize: 26,
              color: '#fff'
            },
            b: {
              lineHeight: 40, // 设置第二行文字的行高
              fontSize: 26,
              color: 'rgba(255, 195, 0, 1)'
            }
          }
        },
        labelLine: {
          show: true,
          length: 20, // 第一段线长度
          length2: 50, // 第二段线长度
          lineStyle: {
            width: 4, // 设置引导线粗细
            type: 'solid', // 线的类型：'solid'实线 | 'dashed'虚线 | 'dotted'点线
            color: '#fff' // 引导线颜色
          }
        },
        // 添加3D效果
        itemStyle: {
          shadowBlur: 30,
          shadowOffsetX: 5,
          shadowOffsetY: 5,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 40,
            shadowOffsetX: 10,
            shadowOffsetY: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        data: [
          { value: 25.7, name: '发电行业' },
          { value: 5.9, name: '炼焦行业' },
          { value: 4.7, name: '其他行业' },
          { value: 3.4, name: '供热行业' },
          { value: 2.9, name: '建材行业' },
          { value: 2.9, name: '煤化工行业' },
          { value: 1.8, name: '冶金行业' }
        ],
        // 设置3D效果的配置
        roseType: 'angle', // 设定为饼图
        animationType: 'scale', // 使用缩放动画
        animationEasing: 'elastic' // 采用弹性动画
      }
    ]
  }
  chart.setOption(option, true)
}

export const getChart3DOne = (dom, mockdata, autoRotate = false) => {
  let chart = echarts.init(dom)

  const colors = ['rgba(214, 184, 73, 1)', 'rgba(68, 158, 216, 1)']
  const dataList = mockdata.map((item, index) => {
    return {
      name: item.name,
      val: item.value,
      itemStyle: {
        color: colors[index]
      }
    }
  })

  const heightProportion = 0.25 // 柱状扇形的高度比例

  // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
  function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {
    // 计算
    let midRatio = (startRatio + endRatio) / 3

    let startRadian = startRatio * Math.PI * 2
    let endRadian = endRatio * Math.PI * 2
    let midRadian = midRatio * Math.PI * 2

    // 如果只有一个扇形，则不实现选中效果。
    if (startRatio === 0 && endRatio === 1) {
      isSelected = false
    }

    // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
    k = typeof k !== 'undefined' ? k : 1 / 3

    // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
    let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
    let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0

    // 计算高亮效果的放大比例（未高亮，则比例为 1）
    let hoverRate = isHovered ? 1.1 : 1

    // 返回曲面参数方程
    return {
      u: {
        min: -Math.PI,
        max: Math.PI * 3,
        step: Math.PI / 32
      },

      v: {
        min: 0,
        max: Math.PI * 2,
        step: Math.PI / 20
      },

      x: function (u, v) {
        if (u < startRadian) {
          return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
        }
        if (u > endRadian) {
          return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
        }
        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
      },

      y: function (u, v) {
        if (u < startRadian) {
          return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
        }
        if (u > endRadian) {
          return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
        }
        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
      },

      z: function (u, v) {
        if (u < -Math.PI * 0.5) {
          return Math.sin(u)
        }
        if (u > Math.PI * 2.5) {
          return Math.sin(u)
        }
        return Math.sin(v) > 0 ? heightProportion * height : -1
      }
    }
  }

  // 生成模拟 3D 饼图的配置项
  function getPie3D(pieData, internalDiameterRatio) {
    let series = []
    let sumValue = 0
    let startValue = 0
    let endValue = 0
    let legendData = []
    let linesSeries = [] // line3D模拟label指示线
    let k =
      typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3

    // 为每一个饼图数据，生成一个 series-surface 配置
    for (let i = 0; i < pieData.length; i++) {
      sumValue += pieData[i].value

      let seriesItem = {
        name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
        type: 'surface',
        parametric: true,
        wireframe: {
          show: false
        },
        pieData: pieData[i],
        pieStatus: {
          selected: false,
          hovered: false,
          k: k
        }
      }

      if (typeof pieData[i].itemStyle != 'undefined') {
        let itemStyle = {}

        typeof pieData[i].itemStyle.color != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null
        typeof pieData[i].itemStyle.opacity != 'undefined' ? (itemStyle.opacity = pieData[i].itemStyle.opacity) : null

        seriesItem.itemStyle = itemStyle
      }
      series.push(seriesItem)
    }

    // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
    // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
    for (let i = 0; i < series.length; i++) {
      endValue = startValue + series[i].pieData.value
      // console.log(series[i]);
      series[i].pieData.startRatio = startValue / sumValue
      series[i].pieData.endRatio = endValue / sumValue
      series[i].parametricEquation = getParametricEquation(
        series[i].pieData.startRatio,
        series[i].pieData.endRatio,
        false,
        false,
        k,
        series[i].pieData.value
      )

      startValue = endValue

      // 计算label指示线的起始和终点位置
      let midRadian = (series[i].pieData.endRatio + series[i].pieData.startRatio) * Math.PI
      let posX = Math.cos(midRadian) * (1 + Math.cos(Math.PI / 2))
      let posY = Math.sin(midRadian) * (1 + Math.cos(Math.PI / 2))
      let posZ = Math.log(Math.abs(series[i].pieData.value + 1)) * 0.2
      let flag =
        (midRadian >= 0 && midRadian <= Math.PI / 2) || (midRadian >= (3 * Math.PI) / 2 && midRadian <= Math.PI * 2)
          ? 1
          : -1
      let color = pieData[i].itemStyle.color
      let turningPosArr = [
        posX * 1.8 + i * 0.1 * flag + (flag < 0 ? -0.5 : 0),
        posY * 1.8 + i * 0.1 * flag + (flag < 0 ? -0.5 : 0),
        posZ * 1
      ]
      let endPosArr = [
        posX * 1.9 + i * 0.1 * flag + (flag < 0 ? -0.5 : 0),
        posY * 1.9 + i * 0.1 * flag + (flag < 0 ? -0.5 : 0),
        posZ * 4
      ]

      linesSeries.push(
        // {
        //   type: 'line3D',
        //   lineStyle: {
        //     color: color,
        //     width: 3,
        //     opacity: 0.8
        //   },
        //   data: [[posX, posY, posZ], turningPosArr, endPosArr]
        // },
        {
          type: 'scatter3D',
          label: {
            show: true,
            distance: 0,
            position: 'center',
            textStyle: {
              color: '#ffffff',
              // backgroundColor: color,
              borderWidth: 2,
              fontSize: 32,
              borderRadius: 4
            },
            formatter: '{b}%'
            // formatter: function (params) {
            //   console.log('🚀 ~ getPie3D ~ params:', params)
            //   // 自定义文本格式
            //   return `${params.name}\n${params.value[2]}亿吨`
            // }
          },
          symbolSize: 0,
          data: [{ name: series[i].name + '\n' + series[i].pieData.val, value: endPosArr }]
        }
      )

      legendData.push(series[i].name)
    }
    series = series.concat(linesSeries)

    // 最底下圆盘
    series.push({
      name: 'mouseoutSeries',
      type: 'surface',
      parametric: true,
      wireframe: {
        show: false
      },
      itemStyle: {
        opacity: 1,
        color: 'rgba(25, 93, 176, 1)'
      },
      parametricEquation: {
        u: {
          min: 0,
          max: Math.PI * 2,
          step: Math.PI / 20
        },
        v: {
          min: 0,
          max: Math.PI,
          step: Math.PI / 20
        },
        x: function (u, v) {
          return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2
        },
        y: function (u, v) {
          return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2
        },
        z: function (u, v) {
          return Math.cos(v) > 0 ? -0 : -1.5
        }
      }
    })
    return series
  }

  let total = 0
  dataList.forEach((item) => {
    total += item.val
  })
  const series = getPie3D(
    dataList.map((item) => {
      item.value = Number(((item.val / total) * 100).toFixed(2))
      return item
    }),
    0.8,
    240,
    28,
    26,
    1
  )
  let option = {
    // legend: {
    //   tooltip: {
    //     show: true
    //   },
    //   data: dataList.map((item) => item.name),
    //   top: '5%',
    //   left: '5%',
    //   icon: 'circle',
    //   textStyle: {
    //     color: '#fff',
    //     fontSize: 14
    //   }
    // },
    // title: [
    //   {
    //     x: 'center',
    //     top: '40%',
    //     text: total,
    //     textStyle: {
    //       color: '#fff',
    //       fontSize: 42,
    //       fontWeight: 'bold'
    //     }
    //   },
    //   {
    //     x: 'center',
    //     top: '48%',
    //     text: '还款总额',
    //     textStyle: {
    //       color: '#fff',
    //       fontSize: 22,
    //       fontWeight: 400
    //     }
    //   }
    // ],
    animation: true,
    labelLine: {
      show: true,
      lineStyle: {
        color: '#7BC0CB'
      }
    },
    label: {
      show: false
    },
    xAxis3D: {
      min: -1.5,
      max: 1.5
    },
    yAxis3D: {
      min: -1.5,
      max: 1.5
    },
    zAxis3D: {
      min: -1,
      max: 1
    },
    grid3D: {
      show: false,
      boxHeight: 4,
      // top: '29%',
      // left: '9%',
      viewControl: {
        distance: 180,
        alpha: 25,
        beta: 60,
        autoRotate: autoRotate // 自动旋转
      }
    },
    series: series
  }
  chart.setOption(option, true)
}
